<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>求出数组中所有数字的和</title>
    <style>
        body {
            color: #999;
            font: 12px/1.5 Tahoma;
        }

        #outer {
            width: 500px;
            margin: 0 auto;
        }

        #outer input {
            padding: 3px;
            border: 1px solid #ccc;
            font-family: inherit;
            width: 220px;
            margin-right: 10px;
        }

        .sum {
            font-size: 30px;
            color: red;
        }
    </style>
    <script>
        window.onload = function () {
            let inp = document.querySelector("input")
            inp.onkeyup=function(){
              this.value=this.value.replace(/[^(\d)|(,)]/, "")
            }
            document.querySelector('button').onclick=function(){
              let sum=0
              for(let i in inp.value.split(",")){
                sum+=Number(inp.value.split(",")[i])
              }
              console.log(sum);
              document.querySelector(".sum").innerHTML=sum
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <label><input type="text"
                value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" /><span>输入数字求和，数字之间用半角","号分隔</span></label>
        <p><button>求和</button></p>
        <strong class="sum"></strong>
    </div>
</body>

</html>